import * as React from 'react';

import './index.scss';

type InputValue = string | ReadonlyArray<string> | number | undefined;

interface InputProps {
  value?: InputValue;
  onChange?: React.ChangeEventHandler<HTMLInputElement>;
  placeholder?: string;
  type?: string | undefined;
}

export class Input extends React.Component<InputProps> {
  render() {
    const { value, onChange, placeholder, type } = this.props;
    return <input className="x-input" type={type} placeholder={placeholder} value={value} onChange={onChange} />;
  }
}

interface TextAreaProps {
  value?: InputValue;
  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
  rows?: number | undefined;
  cols?: number | undefined;
  placeholder?: string;
}

export class TextArea extends React.Component<TextAreaProps> {
  render() {
    const { value, onChange, rows, cols, placeholder } = this.props;
    return (
      <textarea
        className="x-textarea"
        placeholder={placeholder}
        rows={rows}
        cols={cols}
        value={value}
        onChange={onChange}
      />
    );
  }
}
